<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="addFn">添加员工</el-button>
        </el-row>
      </div>
      <div>
        <!-- 表格 -->
        <el-table :data="tableData" border>
          <el-table-column label="用户名" prop="username" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" size="small" @click="rolesFn(row.id)">设置角色</el-button>
              <el-button size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <AddDia ref="addDia" :show-dialog.sync="showDialog" @getEmploy="getEmployeesList" />
    <AssignRole ref="role" :is-checkbox.sync="isCheckbox" />
  </div>
</template>

<script>
import { getEmployeesList, userCount, delEmployee } from '@/api/employees'
import AddDia from './components/add-dia.vue'
import AssignRole from './components/assign-role.vue'
export default {
  components: { AddDia, AssignRole },
  data() {
    return {
      showDialog: false,
      isCheckbox: false,
      tableData: [],
      page: 1,
      pageSize: 2,
      total: 10,
      editId: null
    }
  },
  async created() {
    // 调用函数 获取员工数据
    this.getEmployeesList()
    this.userCount()
  },
  methods: {
    // 分页事件
    changePage(page) {
      // 更改页面
      this.page = page
      // 更新列表
      this.getEmployeesList()
    },
    // 获取员工长度
    async userCount() {
      const res = await userCount()
      this.total = res.data
    },
    // 添加员工
    addFn() {
      this.showDialog = true
    },
    // 获取员工列表
    async getEmployeesList() {
      const res = await getEmployeesList({
        _start: this.pageSize * (this.page - 1),
        _limit: this.pageSize
      })
      this.tableData = res.data
      this.userCount()
    },
    // 设置角色
    rolesFn(id) {
      console.log(id)
      this.isCheckbox = true
      this.$refs.role.getRoles(id)
    },
    // 编辑员工
    editFn(id) {
      this.addFn()
      this.$refs.addDia.getEmployeeById(id)
      // this.$nextTick(()=>{
      //   this.$refs.addDia.image()
      // })
    },
    // 删除员工
    delFn(id) {
      console.log(id)
      this.$confirm('是否删除该数据', '删除', {
        type: 'warning'
      }).then(async() => {
        // 调用接口 删除数据
        await delEmployee(id)
        // 更新列表
        this.getEmployeesList()
        // 分页减一
        if (this.page !== 1 && this.tableData.length === 1) {
          this.page--
          this.getEmployeesList()
        }
      }).catch(err => {
        console.log('取消', err)
      })
    }
  }
}
</script>

<style>

</style>
